<template>
  <div class="warningDerailedInfo">
    <NavBar>
      <div slot="left_slot" class="main_left flex-top-left">
        <van-icon name="arrow-left" size="0.3rem" @click="go_home" />
      </div>
      <div slot="center_slot" class="main_center flex-top-left">
        <p class="center_title">详细预警</p>
      </div>
    </NavBar>
    <div class="detailed_infoContainer">
      <WarningCard
        v-for="(item, index) in this.newWarningData"
        :key="index"
        :warningObj="item"
      />
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/common/navBar/NavBar";
import WarningCard from "../../components/common/warningCard/WarningCard";
//
import { mapState } from "vuex";
//
import { severityColor } from "../../config/severityText";
import { severityDataInit } from "../../utils/tools";
export default {
  name: "WarningDetailedInfo",
  components: {
    NavBar,
    WarningCard,
  },
  computed: {
    ...mapState(["warningStateArr"]),
    newWarningData() {
      return severityDataInit(this.warningStateArr, severityColor);
    },
  },
  methods: {
    go_home() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.warningDerailedInfo {
  width: 100%;
  min-height: 100vh;
}
.main_left,
.main_center {
  width: 100%;
  height: 100%;
}
.center_title {
  font-size: 0.18rem;
}
.detailed_infoContainer {
  padding: 0.15rem 0.16rem;
}
</style>